<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="210px" class="custom-aside">
                <div class="mgT10 textC">
                    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                        <el-radio-button :value="false">展开</el-radio-button>
                        <el-radio-button :value="true">
                            收起
                        </el-radio-button>
                    </el-radio-group> -->
                    <div class="logo-container">
                        <img src="@/assets/images/logo.png" alt="Logo" class="logo-image" />
                    </div>
                    <el-menu :default-openeds="['1']" class="el-menu-vertical-demo" :collapse="isCollapse"
                        :router="true">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item id="xsgl" index="1-1" route="/user/stu"
                                    @click="checkMenuUrl('学生管理', 'xsgl')">
                                    学生管理
                                </el-menu-item>
                                <el-menu-item id="yhrz" index="1-1" route="/user/log"
                                    @click="checkMenuUrl('用户日志', 'yhrz')">
                                    用户日志
                                </el-menu-item>
                                <el-menu-item id="wjgl" index="1-2" route="/user/file"
                                    @click="checkMenuUrl('文件管理', 'wjgl')">
                                    文件管理
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-sub-menu>
                        <el-menu-item id="qysj" index="2" route="/user/region" @click="checkMenuUrl('区域数据', 'qysj')">
                            <el-icon>
                                <Location />
                            </el-icon>
                            <template #title>区域数据</template>
                        </el-menu-item>
                    </el-menu>
                </div>
            </el-aside>
            <el-container>
                <el-header>
                    <el-row align="middle" class="h60">
                        <el-col :span="16">
                            当前位置：<router-link id="shouye" to="/">首页</router-link>
                            <label v-if="breadcrumb">/{{ breadcrumb }}</label>
                        </el-col>
                        <el-col :span="8">
                            <div class="textR">
                                欢迎您：{{ userInfo.nick_name }}({{ userInfo.account }})，
                                <label class="cursor" @click="btnLogout">注销登录</label>
                            </div>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main class="pd0 mgL10 mgR10">
                    <router-view v-slot="{ Component }">
                        <keep-alive>
                            <component :is="Component"></component>
                        </keep-alive>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import {
    ref,
    watch,
    onMounted,
    onUnmounted,
    getCurrentInstance,
    onBeforeMount,
} from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { getLocal, removeLocal } from "@/store/funcs";

const store = useStore();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;

const userInfo: any = ref({});
const isCollapse = ref(false);
const breadcrumb: any = ref("");

onBeforeMount(() => {
    const myLocalData = getLocal("myLocalData");
    if (myLocalData && myLocalData.account) {
        userInfo.value = myLocalData;
    } else {
        proxy.$funcs.openPage("/login");
    }
});

onMounted(() => {
    if (route.meta && route.meta.title) {
        breadcrumb.value = route.meta.title;
    }
    setActiveClass('null'); // 假设 'yhrz' 是默认选中的项
});

const checkMenuUrl = (val: any, id: string) => {
    breadcrumb.value = val;
    setTimeout(() => {
        setActiveClass(id);
    }, 10);
};

const btnLogout = () => {
    ElMessageBox.confirm("确定要注销登录吗？注销成功后需要重新登录。", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true,
        closeOnClickModal: false,
        closeOnPressEscape: false,
    })
        .then(() => {
            removeLocal("myLocalData");
            proxy.$funcs.openPage("/login");
            ElMessage({
                type: "success",
                message: "注销成功",
            });
        })
        .catch(() => { });
};

const setActiveClass = (id: string) => {
    // 移除所有菜单项的 'menu-active' 样式
    const menuItems = document.querySelectorAll('el-menu-item');
    menuItems.forEach(item => {
        item.classList.remove('menu-active');
    });

    // 为当前点击的菜单项添加 'menu-active' 样式
    const activeItem = document.getElementById(id);
    if (activeItem) {
        activeItem.classList.add('menu-active');
    }
};

onUnmounted(() => { });
</script>

<style>
.menu-active {
    background-color: #409eff;
    /* background-color: #ffffff; */
    /* 设置选中项的背景色 */
    color: #ffffff !important;
    /* 确保选中项的文字颜色为白色 */
    border-radius: 4px;
    /* 可选：添加圆角 */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-menu {
    background-color: transparent !important;
}

.el-sub-menu__title,
.el-menu-item {
    color: #fff !important;
    /* 设置菜单文字为白色 */
}

.logo-container {
    text-align: center;
    margin-bottom: 20px;
}

.logo-image {
    max-width: 100%;
    height: auto;
    /* 你可以根据需要调整宽高 */
}

.el-header {
    background-color: #2d3a4b;
    color: #fff !important;
}

.custom-aside {
    background-color: #2d3a4b;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;
    height: 100vh;
}

el-row {
    align-items: center;
    /* 垂直居中 */
}

.el-menu-vertical-demo .el-menu-item:hover {
    color: #000 !important;
    /* 设置悬停时的文字颜色为黑色 */
}

#shouye {
    color: #ffffff !important;
}

#shouye:hover {
    color: #a3a1a1 !important;
}
</style>
